<template>
  <div>
    <n-form
        ref="formRef"
        inline
        :label-width="80"
        :rules="rules"
    >
      <n-grid :cols="24" :x-gap="24">


        <n-form-item-gi :span="24" label="CHECKPOINT" path="defaultModel">
          <n-select
            v-model:value="props.paintEngineConfig.base_model_name"
            :options="modelOptions"
            style="width: 100%"
          />
        </n-form-item-gi>
        <n-form-item-gi :span="24" label="Refiner" path="defaultVae">
          <n-select
            :clearable="true"
            :options="modelOptions"
            v-model:value="props.paintEngineConfig.refiner_model_name"
          />
        </n-form-item-gi>

        <n-form-item-gi :span="24" label="Refiner Switch At" path="defaultVae" v-if="props.paintEngineConfig.refiner_model_name && text2ImgPrompt.refiner_model_name.length>0">
          <n-slider v-model:value="props.paintEngineConfig.refiner_switch" :step="0.01" :min="0" :max="1" />
        </n-form-item-gi>


        <n-form-item-gi :span="24" label="出图模式" path="performance_selection">
          <n-radio-group v-model:value="props.paintEngineConfig.performance_selection" name="performance_selection">
            <n-space>
              <n-radio value="Speed">
                普通模式
              </n-radio>
              <n-radio value="Quality">
                质量模式
              </n-radio>
              <n-radio value="Extreme Speed">
                急速模式
              </n-radio>
              <n-radio value="Lightning">
                闪电模式
              </n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item-gi>
        <n-form-item-gi :span="12" label="尺寸">
          <n-select
            :options="aspect_ratios"
            v-model:value="props.paintEngineConfig.aspect_ratios_selection"
            label-field="size"
            value-field="size"
            :render-label="renderLabel"
          />
        </n-form-item-gi>

        <n-form-item-gi :span="12" label="种子(-1随机)" path="image_seed">
          <n-input-group>
            <n-input-number v-model:value="props.paintEngineConfig.image_seed" :min=-1></n-input-number>
          </n-input-group>
        </n-form-item-gi>

        <n-form-item-gi :span="8" label="生成数量" path="image_number">
          <n-input-number v-model:value="props.paintEngineConfig.image_number" :max="4" :min="1">
          </n-input-number>
        </n-form-item-gi>
        <n-form-item-gi :span="8" label="Guidance Scale" path="guidance_scale">
          <n-input-number v-model:value="props.paintEngineConfig.guidance_scale" :min="0" :max="30">
          </n-input-number>
        </n-form-item-gi>
        <n-form-item-gi :span="8" label="Sampling Sharpness" path="sharpness">
          <n-input-number v-model:value="props.paintEngineConfig.sharpness" :min="0" :max="30">
          </n-input-number>
        </n-form-item-gi>
        <n-form-item-gi :span="24" path="prompt" label="正向提示词">
          <n-input v-model:value="props.paintEngineConfig.prompt" type="textarea" />
        </n-form-item-gi>
        <n-form-item-gi span="24" path="negativePrompt" label="反向提示词">
          <n-input v-model:value="props.paintEngineConfig.negative_prompt"  type="textarea" />
        </n-form-item-gi>
        <n-form-item-gi label="风格与Lora预设" :span="24">
          <n-tabs
            class="card-tabs"
            default-value="style"
            size="small"
            animated
            pane-wrapper-style="margin: 0 -4px"
            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
          >
            <n-tab-pane name="style" tab="风格" display-directive="show">
              <!--                <n-input style="margin-bottom: 5px;"  v-model:value="styleQuery" placeholder="请输入风格名称" clearable></n-input>-->

                <n-grid :x-gap="2" :y-gap="2">
                  <n-grid-item :span="4" v-for="style in stylesOption">
                    <n-card :content-style="{padding:'2px 2px 2px 2px'}" @click="styleClick(style)">
                      <template #cover>
<!--                                                  <img :src="'/src/assets/fooocus/'+style.image" >-->
                        <img :src="'/assets/fooocus/'+style.image" >
                      </template>
                      <n-grid>
                        <n-grid-item :span="6">
                          <n-checkbox size="small" v-model:checked="style.isCheck"></n-checkbox>
                        </n-grid-item>
                        <n-grid-item :span="18">
                          <n-ellipsis :line-clamp="1">
                            {{style.label}}
                          </n-ellipsis>
                        </n-grid-item>
                      </n-grid>
                    </n-card>
                  </n-grid-item>
                </n-grid>
            </n-tab-pane>
            <n-tab-pane name="lora" tab="Lora" display-directive="show">
              <n-grid :x-gap="6" v-for="(lora,index) in props.paintEngineConfig.loras">
                <n-grid-item :span="12">
                  <n-form-item-gi :label="`loRA ` + (index + 1)">
                    <n-select :options="loraOptions" v-model:value="lora.model_name" clearable>
                    </n-select>
                  </n-form-item-gi>
                </n-grid-item>

                <n-grid-item :span="12">
                  <n-form-item-gi label="权重">
                    <n-input-number :min="-2" :max="2" :step="0.01" v-model:value="lora.weight"></n-input-number>
                  </n-form-item-gi>
                </n-grid-item>
              </n-grid>
            </n-tab-pane>
          </n-tabs>
        </n-form-item-gi>
      </n-grid>
    </n-form>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {useMessage} from 'naive-ui';
// @ts-ignore
import fileFunction from '@/libs/globalFunction/file.js'
import {fooocusControllerApi} from "@/api/paint/fooocusController.api";
import {sdControllerApi} from "@/api/sd/sdController.api";
import {fooocusDict} from "@/dictionary/fooocusDict";
import fooocusZh from '@/views/pages/aiart/fooocus/component/zh.json'
const {aspect_ratios} = fooocusDict()
const checked = ref(false)
const formRef: any = ref(null);
const message = useMessage();
const resourceLoading = ref(false)
const modelOptions = ref([])
const refinerOptions = ref([])
const loraOptions = ref([])
const resourceOption = ref([])
const stylesOption = ref([])

// 获取SD资源详情
const getResourceConfig = (resouceId: string) => {
  resourceLoading.value = true
  fooocusControllerApi.getFooocusModelInfo(resouceId).then(res => {
    if (res.code === 200) {
      modelOptions.value = []
      res.data.model_filenames.forEach((item: any) => {
        // @ts-ignore
        modelOptions.value.push({
          label: item,
          value: item
        })
      })
      if (res.data.model_filenames.length > 0) {
        props.paintEngineConfig.base_model_name = res.data.model_filenames[0]
      }
      refinerOptions.value = []
      res.data.refiner_filenames?.forEach((item: any) => {
        // @ts-ignore
        refinerOptions.value.push({
          label: item,
          value: item
        })
      })
      if (res.data.refiner_model_name?.length > 0) {
        props.paintEngineConfig.refiner_model_name = res.data.refiner_model_name[0]
      }
      loraOptions.value = []
      res.data.lora_filenames?.forEach((item: any) => {
        // @ts-ignore
        loraOptions.value.push({
          label: item,
          value: item
        })
      })

      console.log(props.paintEngineConfig)
      initStyle(res.data.styles)
    } else {
      window.$message.error(res.msg)
    }
  }).finally(() => {
    resourceLoading.value = false
  })
}

const initStyle = (styles:[])=>{
  stylesOption.value = []
  const stylesCheck = ref([])
  styles.forEach((item:any)=>{
    if (props.paintEngineConfig.style_selections.includes(item)) {
      stylesCheck.value.push(item)
      stylesOption.value.push({
        label: fooocusZh[item]?fooocusZh[item]:item,
        value: item,
        image: item.toLowerCase().replaceAll(' ','_')+ '.jpg',
        isCheck: true
      })
    }
  })
  styles.forEach((item:any)=>{
    if (!stylesCheck.value.includes(item)) {
      stylesOption.value.push({
        label: fooocusZh[item]?fooocusZh[item]:item,
        value: item,
        image: item.toLowerCase().replaceAll(' ','_')+ '.jpg',
        isCheck: false
      })
    }
  })
}

onMounted(() => {
  getResourceConfig(props.resourceId)
});

// 初始化数据

const props = defineProps({
  paintEngineConfig: {
    type: Object,
    required: true
  },
  resourceId: {
    type: String,
    required: true
  }
})


const drawerWidth = ref(0)

const picList = ref([])
const buttonLoading = ref(false)

const rules = {
  image_seed:{
    required: true,
    type: 'number',
    message: '请输入数字',
    trigger: 'submit',
  },
  performance_selection:{
    required: true,
    message: '请选择出图模式',
    trigger: 'submit'
  },
  sharpness:{
    required: true,
    type: 'number',
    message: '请输入数字',
    trigger: 'submit'
  },
  guidance_scale:{
    required: true,
    type: 'number',
    message: '请输入数字',
    trigger: 'submit'
  },
  image_number: {
    required: true,
    type: 'number',
    message: '请输入数字',
    trigger: 'submit'
  }

};

/**初始化事件**/
onMounted(() => {
  // 设置当前drawerWidth 宽度
  drawerWidth.value = window.innerWidth - 300;
  window.addEventListener('resize', handleResize);
})

// 窗口宽度变化
const handleResize = () => {
  drawerWidth.value = window.innerWidth - 300;
}


const renderLabel = (option: any) => {
  return option.size + ' 【比例:' + option.ratio + '】'
}


const styleClick = (style:any) =>{
  style.isCheck = !style.isCheck
  if (style.isCheck) {
    props.paintEngineConfig.style_selections.push(style.value)
  }else {
    props.paintEngineConfig.style_selections = props.paintEngineConfig.style_selections.filter(item => item !== style.value);
  }
  const styles = []
  stylesOption.value.forEach((item:any)=>{
    styles.push(item.value)
  })
  initStyle(styles)
}



</script>


<style>
.image-container-lora {
  height: 150px; /* 设置容器的固定高度 */
  display: flex; /* 使用Flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.centered-image-lora {
  max-height: 100%; /* 图片的最大高度为容器高度，宽度会自动适应宽高比例 */
  max-width: 100%; /* 图片的最大宽度为容器宽度，高度会自动适应宽高比例 */
}
</style>
